<template>
  <a-layout class="layout">
    <a-layout-sider v-model:collapsed="collapsed" :trigger="null" collapsible>
      <div class="logo">
        <img src="/vite.svg" />
        <p v-if="!collapsed">Maix数联平台</p>
      </div>
      <a-menu v-model:selectedKeys="selectedKeys" theme="dark" mode="inline">
        <a-menu-item class="menuitem" key="1">
          <home-filled />
          <span>提交作业</span>
        </a-menu-item>
        <a-menu-item class="menuitem" key="2">
          <pie-chart-filled />
          <span>在线测试</span>
        </a-menu-item>
        <a-menu-item class="menuitem" key="3">
          <setting-filled />
          <span>学生评价</span>
        </a-menu-item>
        <a-menu-item class="menuitem" key="4">
          <setting-filled />
          <span>课程资源</span>
        </a-menu-item>
      </a-menu>
    </a-layout-sider>
    <a-layout>
      <a-layout-header class="header">
        <menu-unfold-outlined v-if="collapsed" class="trigger" @click="() => (collapsed = !collapsed)" />
        <menu-fold-outlined v-else class="trigger" @click="() => (collapsed = !collapsed)" />
        <div class="user-info-cont">
          <a-avatar :size="42" style="background-color: cornflowerblue;">
            <template #icon>
              <user-outlined />
            </template>
          </a-avatar>
          <!-- <user-outlined style="height: 64px;width:64px;font-size: 42px;display: flex;align-items: center;justify-content: center;" /> -->
          <div>
            <p>{{ props.userInfo.name }}({{props.userInfo.group}}组{{props.userInfo.level == 2 ? '长': ''}})</p>
            <p>{{ props.userInfo.id }}</p>
          </div>
          <logout-outlined style="font-size: 24px;color: gray;opacity: 0.5;" @click="emits('logout')" />
        </div>
      </a-layout-header>
      <a-layout-content class="content">
        <UploadWork style="height: 100%;" v-show="selectedKeys[0]==1"></UploadWork>
        <online-test v-show="selectedKeys[0]==2"></online-test>
        <during-lesson v-show="selectedKeys[0]==3"></during-lesson>
        <lesson-resource v-show="selectedKeys[0]==4"></lesson-resource>
      </a-layout-content>
    </a-layout>
  </a-layout>
</template>

<script setup>
import UploadWork from "./UploadWork.vue";
import OnlineTest from "./OnlineTest.vue";
import DuringLesson from "./DuringLesson.vue";
import LessonResource from "./LessonResource.vue";
import {
  MenuUnfoldOutlined,
  MenuFoldOutlined,
  HomeFilled,
  PieChartFilled,
  SettingFilled,
  UserOutlined,
  LogoutOutlined
} from "@ant-design/icons-vue";
import { ref } from "vue";
import { post } from "../api/request"
const props = defineProps({
  userInfo: Object,
});
const selectedKeys = ref(["1"]);
const collapsed = ref(false);
const emits = defineEmits(['logout']);

function postTest(){
  post('/user/test',{msg: 'test post'})
  .then((res) => {
    console.log(res.data);
  })
  .catch((err) => {
    console.log(err);
  });
}
</script>

<style scoped>
.header {
  background: #fff;
  padding: 0;
  display: flex;
  justify-content: space-between;
}

.trigger {
  font-size: 28px;
  line-height: 64px;
  padding: 0 24px;
  cursor: pointer;
  transition: color 0.3s;
}

.trigger:hover {
  color: #1890ff;
}

.user-info-cont {
  background: #fff;
  height: 64px;
  padding: 0;
  margin-right: 24px;
  display: flex;
  align-items: center;
  /* justify-content: space-between; */
}

.user-info-cont>div {
  margin: 0 12px 0 4px;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: left;
  justify-content: center;
}

.user-info-cont>div>p {
  margin: 0;
  font-size: 14px;
  height: 21px;
  line-height: 21px;
  font-weight: bold;
}


.logo {
  height: 32px;
  background: rgba(255, 255, 255, 0.3);
  margin: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: bold;
  font-size: 16px;
  overflow: hidden;
}

.logo img {
  height: 70%;
  margin: 0;
}

.logo p {
  margin: 0 0 0 8px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.menuitem {
  height: 48px !important;
}

.menuitem span {
  font-size: 20px;
}

.content {
  margin: 24px 16px;
  padding: 24px;
  background: #fff;
  min-height: 280px;
}
</style>
